import React, { useState, useEffect } from 'react';
// 导入基础库
import { connect, history } from 'umi';
// 导入配置参数
// 导入处理函数
import com from '../../utils/common';
import { getJSON } from '../../utils/request';
// 导入UI组件
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Tooltip, Image, Space,Modal } from 'antd';
// 导入LESS样式
import styles from './profile_id.less';

const { confirm } = Modal;

const PageView = (props) => {
  // 初始化参数------------------------------------------------
  const { ui, table: tb, socketio: io, dispatch: dp } = props;
  var profile = io.profile;

  const [fileList, setFileList] = useState([]);
  const [init, setinit] = useState(true);

  useEffect(async () => {
    if (init) {
      var x = await getJSON(process.env.postUrl + '/api/imgs/' + profile._id);
      setFileList(x, profile._id);
      setinit(false);
    }
  });

  // 渲染UI组件------------------------------------------------
  return (
    <PageContainer
      loading={ui.loading}
      fixedHeader
      affixProps={{ offsetTop: 48 }}
      title="档案详情"
      extra={[
        <Button key="4" onClick={() => history.goBack()}>
          返回上一页
        </Button>,
        <Button key="3" onClick={() => com.print(window)}>
          打印
        </Button>,
        <Button key="2" onClick={() => {
          confirm({
            title: '询问?',
            content: '是否要删除档案?',
            onOk() {
              dp({ type: 'socketio/emit', payload: { type: "remove_file", data: [profile._id] } })
              history.goBack()
            }
          });
        }}>删除档案</Button>,
        <Button
          key="1"
          type="primary"
          onClick={() => history.push(`/manage/edit/${profile._id}`)}
        >
          编辑
        </Button>,
      ]}
    >
      <div id="print">
        <h1 className={styles.title}>
          <span>档案编号：{profile['编号']}</span>
          {profile['姓名']} 档案详情
          <span>录入时间：{profile['录入时间']}</span>
        </h1>
        <table className={styles.table} border={1} bordercolor="#000000">
          <tbody>
            <tr>
              <td style={{ width: '12%' }}>辖区</td>
              <td>{profile['辖区']}</td>
              <td style={{ width: '12%' }}>姓名</td>
              <td>{profile['姓名']}</td>
              <td style={{ width: '12%' }}>性别</td>
              <td>{profile['性别']}</td>
            </tr>
            <tr>
              <td>身份证号</td>
              <td>
                <Tooltip
                  placement="top"
                  overlayClassName={styles.tooltip}
                  title={profile['身份证号']}
                >
                  {profile['身份证号']}
                </Tooltip>
              </td>
              <td>电话号码</td>
              <td>
                {profile['电话号码']
                  ? profile['电话号码'].split('#').map((i, id) => (
                      <p key={id}>
                        <Tooltip
                          placement="top"
                          overlayClassName={styles.tooltip}
                          title={i}
                        >
                          {i}
                        </Tooltip>
                      </p>
                    ))
                  : null}
              </td>
              <td>职业</td>
              <td>{profile['职业']}</td>
            </tr>
            <tr>
              <td>户籍地址</td>
              <td>{profile['户籍地址']}</td>
              <td>实际居住地</td>
              <td>{profile['实际居住地']}</td>
              <td>健康状况</td>
              <td>{profile['健康状况']}</td>
            </tr>
            <tr>
              <td>是否到达玉林</td>
              <td>{profile['是否到达玉林']}</td>
              <td>来玉时间</td>
              <td>{profile['来玉时间']}</td>
              <td>离玉时间</td>
              <td>{profile['离玉时间']}</td>
            </tr>
            <tr>
              <td>本市人员/市外人员</td>
              <td>{profile['本市人员/市外人员']}</td>
              <td>来自何地</td>
              <td>{profile['来自何地']}</td>
              <td>扫码情况</td>
              <td>{profile['扫码情况']}</td>
            </tr>
            <tr style={{ height: '180px' }}>
              <td>是否做过核酸检测</td>
              <td>{profile['是否做过核酸检测']}</td>
              <td>最新一次核酸检测日期、结果</td>
              <td>{profile['最新一次核酸检测日期、结果']}</td>
              <td>是否感染过新冠肺炎病毒</td>
              <td>{profile['是否感染过新冠肺炎病毒']}</td>
            </tr>
            <tr style={{ height: '150px' }}>
              <td>人员轨迹</td>
              <td colSpan={5}>{profile['人员轨迹']}</td>
            </tr>
            <tr style={{ height: '150px' }}>
              <td>核查情况</td>
              <td colSpan={5}>{profile['核查情况']}</td>
            </tr>
            <tr style={{ height: '150px' }}>
              <td>措施</td>
              <td colSpan={5}>{profile['措施']}</td>
            </tr>
            <tr>
              <td>是否发乡镇跟进</td>
              <td>{profile['是否下发乡镇跟进']}</td>
              <td>管控状态</td>
              <td>{profile['管控状态']}</td>
              <td>管控时间</td>
              <td>{profile['管控时间']}</td>
            </tr>
            <tr style={{ height: '180px' }}>
              {/* <td>乡镇反馈</td>
            <td>{profile['乡镇反馈']}</td> */}
              <td>备注</td>
              <td colSpan={5}>{profile['备注']}</td>
            </tr>
            <tr>
              <td>数据来源</td>
              <td colSpan={5}>{profile['数据来源']}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <table>
        <tbody>
          <tr>
            <td>
              <h2>图片资料</h2>
            </td>
          </tr>
          <tr>
            <td>
              <Image.PreviewGroup>
                <Space size={[10, 10]} wrap>
                  {fileList.map((file, id) => (
                    <Image
                      key={id}
                      width={200}
                      src={`http://localhost:3008/imgs/${file.filename}`}
                    />
                  ))}
                </Space>
              </Image.PreviewGroup>
            </td>
          </tr>
        </tbody>
      </table>
    </PageContainer>
  );
};

export default connect(({ ui, table, socketio }) => ({ ui, table, socketio }))(
  PageView,
);
